<template>
    <el-card title="基础用法">
        <el-row class="mb-4">
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
        </el-row>

        <el-row class="mb-4">
            <el-button plain>Plain</el-button>
            <el-button type="primary" plain>Primary</el-button>
            <el-button type="success" plain>Success</el-button>
            <el-button type="info" plain>Info</el-button>
            <el-button type="warning" plain>Warning</el-button>
            <el-button type="danger" plain>Danger</el-button>
        </el-row>

        <el-row class="mb-4">
            <el-button round>Round</el-button>
            <el-button type="primary" round>Primary</el-button>
            <el-button type="success" round>Success</el-button>
            <el-button type="info" round>Info</el-button>
            <el-button type="warning" round>Warning</el-button>
            <el-button type="danger" round>Danger</el-button>
        </el-row>

        <el-row>
            <el-button icon="ElIconSearch" circle />
            <el-button type="primary" icon="ElIconEdit" circle />
            <el-button type="success" icon="ElIconCheck" circle />
            <el-button type="info" icon="ElIconMessage" circle />
            <el-button type="warning" icon="ElIconStar" circle />
            <el-button type="danger" icon="ElIconDelete" circle />
        </el-row>
    </el-card>
    <el-card header="禁用状态">
        <el-row class="mb-4">
            <el-button disabled>Default</el-button>
            <el-button type="primary" disabled>Primary</el-button>
            <el-button type="success" disabled>Success</el-button>
            <el-button type="info" disabled>Info</el-button>
            <el-button type="warning" disabled>Warning</el-button>
            <el-button type="danger" disabled>Danger</el-button>
        </el-row>

        <el-row>
            <el-button plain disabled>Plain</el-button>
            <el-button type="primary" plain disabled>Primary</el-button>
            <el-button type="success" plain disabled>Success</el-button>
            <el-button type="info" plain disabled>Info</el-button>
            <el-button type="warning" plain disabled>Warning</el-button>
            <el-button type="danger" plain disabled>Danger</el-button>
        </el-row>
    </el-card>
    <el-card header="链接按钮">
        <p>Basic link button</p>
        <el-space>
            <el-button v-for="button in buttons" :key="button.text" :type="button.type" link>
                {{ button.text }}
            </el-button>
        </el-space>

        <p>Disabled link button</p>
        <el-space>
            <el-button v-for="button in buttons" :key="button.text" :type="button.type" link disabled>
                {{ button.text }}
            </el-button>
        </el-space>
    </el-card>
    <el-card header="文字按钮">
        <p>Basic text button</p>
        <el-space>
            <el-button v-for="button in buttons" :key="button.text" :type="button.type" text>
                {{ button.text }}
            </el-button>
        </el-space>

        <p>Background color always on</p>
        <el-space>
            <el-button v-for="button in buttons" :key="button.text" :type="button.type" text bg>
                {{ button.text }}
            </el-button>
        </el-space>

        <p>Disabled text button</p>
        <el-space>
            <el-button v-for="button in buttons" :key="button.text" :type="button.type" text disabled>
                {{ button.text }}
            </el-button>
        </el-space>
    </el-card>
    <el-card header="图标按钮">
        <el-space>
            <el-button type="primary" icon="ElIconShare" />
            <el-button type="primary" icon="ElIconDelete" />
            <el-button type="primary" icon="ElIconSearch">Search</el-button>
            <el-button type="primary">
                Upload
                <el-icon class="el-icon--right"><Upload /></el-icon>
            </el-button>
        </el-space>
    </el-card>
    <el-card header="按钮组">
        <el-space>
            <el-button-group>
                <el-button type="primary" icon="ElIconArrowLeft">Previous Page</el-button>
                <el-button type="primary">
                    Next Page
                    <el-icon class="el-icon--right"><ArrowRight /></el-icon>
                </el-button>
            </el-button-group>

            <el-button-group class="ml-4">
                <el-button type="primary" icon="ElIconEdit" />
                <el-button type="primary" icon="ElIconShare" />
                <el-button type="primary" icon="ElIconDelete" />
            </el-button-group>
        </el-space>
    </el-card>
    <el-card header="加载状态按钮">
        <el-button type="primary" loading>Loading</el-button>
        <el-button type="primary" loading-icon="ElIconEleme" loading>Loading</el-button>
        <el-button type="primary" loading>
            <template #loading>
                <div class="custom-loading">
                    <svg class="circular" viewBox="-10, -10, 50, 50">
                        <path
                            class="path"
                            d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                            style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
                        />
                    </svg>
                </div>
            </template>
            Loading
        </el-button>
    </el-card>
</template>

<script lang="ts" setup>
const buttons: any[] = [
    { type: "", text: "plain" },
    { type: "primary", text: "primary" },
    { type: "success", text: "success" },
    { type: "info", text: "info" },
    { type: "warning", text: "warning" },
    { type: "danger", text: "danger" },
];
</script>

<style lang="scss">
.mb-4 {
    margin-bottom: 1rem;
}
.gap-4 {
    grid-gap: 1rem;
    gap: 1rem;
}
</style>
